<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://www.kuibutech.com/wechatAuth/css/weui.css">
    <title>个人主页</title>
</head>

<style type="text/css">
    .blur{
        filter: blur(3px);
        -webkit-filter: blur(3px);
    }
    .user_back {
        background-image: url("http://kuibutech.oss-cn-shanghai.aliyuncs.com/reevesFiles/kaixueji.jpg");
        background-position: center top;
        width: 100%;
        height: 10rem;
        text-align: center;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 1;
    }

    .backgroud_img{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10rem;
    }

    .user {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: solid 2px #ffffff;
        overflow: hidden;
        margin-top: 35px;
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }

    .weui_navbar_item {
        padding: 10px 0;
    }

    .submit {
        margin-top: 20px;
        width: 96%;
        margin-left: 2%;
        margin-bottom: 10px;
    }

    .weui_tab_bd {
        margin-top: 0px;
    }

    .weui_navbar {
        position: fixed;
        left: 0px;
        top: 10rem;
    }

    .weui_tab {
        height: 12rem;
    }

    .tips{
        text-align: center;
        color: #9B9B9B;
        margin-bottom: 5px;
    }

</style>

<script type="text/javascript">
    function show_record() {
        $('#user').hide();
        $('#record').show();
    }

    function show_user() {
        $('#user').show();
        $('#record').hide();
    }
</script>

<body>


<div class="user_back">
    <img class="backgroud_img blur" src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/reevesFiles/kaixueji.jpg">
    <img class="user" src="${user_info.photo}"/>
    <p style="color: #ffffff;margin-top: 0px">${user_info.name}</p>
</div>


<div class="weui_tab">
    <div class="weui_navbar">
        <div class="weui_navbar_item" onclick="show_user()">
            个人资料
        </div>
        <div class="weui_navbar_item" onclick="show_record()">
            达人日记
        </div>
    </div>
</div>


<div id="user" class="weui_tab_bd">
    <br/>
    <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">大学/公司</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" placeholder="" value="${user_info.college}">
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">性别</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" placeholder="" value="${user_info.sex}">
            </div>
        </div>

        <%--
        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">微信</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" placeholder="" value="${user_info.wechatAccount}">
            </div>
        </div>
        --%>

        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <div class="weui_uploader">
                    <div class="weui_uploader_bd">
                        <textarea class="weui_textarea" name="slogan" placeholder="个性签名"
                                  rows="3">${user_info.slogan}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <%--
        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">推荐人</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" placeholder="" value="${user_info.invite}">
            </div>
        </div>
        --%>

        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">常用跑步App</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" placeholder="" value="${user_info.runapp}">
            </div>
        </div>

        <!--<div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">运动成绩</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" placeholder="Reeves">
            </div>
        </div>-->

        <!--<div class="weui_cell weui_cell_select weui_select_after">
            <div class="weui_cell_hd">
                <label class="weui_label">性别</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <select class="weui_select" name="select2">
                    <option value="1">boy</option>
                    <option value="2">girl</option>
                </select>
            </div>
        </div>-->

        <!--<div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">地区</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" placeholder="安徽/蚌埠">
            </div>
        </div>-->

    </div>

    <div class="weui_cells_title" style="margin-top: 20px;color: #9B9B9B">运动成绩</div>
    <div id="records" class="weui_cells">
        <c:forEach items="${records}" var="record">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>${record.type}</p>
                </div>
                <div class="weui_cell_ft">${record.hour}时${record.minute}分${record.second}秒</div>
            </div>
        </c:forEach>
    </div>

    <div class="submit">
        <a href="gotoEditInfo" class="weui_btn weui_btn_primary">编辑资料</a>
    </div>

</div>

<div id="record" class="weui_tab_bd weui_cells_access" hidden>

    <div class="weui_cells_title" style="margin-top: 20px;color: #9B9B9B">累计运动量:</div>
    <div class="weui_cells">
        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <div class="weui_uploader">
                    <div class="weui_uploader_bd">
                        <textarea class="weui_textarea" name="slogan" placeholder="个性签名,30字以内哦" rows="5">截止目前,您已累计跑步 ${count_data.run} 公里
累计骑行 ${count_data.bike} 公里
累计走路 ${count_data.walk} 步
累计健身 ${count_data.build} 小时
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="weui_cells_title" style="margin-top: 20px;color: #9B9B9B">打卡记录:</div>
    <div class="weui_cells">
        <c:forEach items="${launch_records}" var="launch_record">
            <a class="weui_cell" href="gotoShare/${launch_record.id}">
                <div class="weui_cell_hd">
                    <img style="width:20px;margin-right:5px;display:block"
                         src="http://www.kuibutech.com/wechatAuth/img/icon_nav_article.png">
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>完成 ${launch_record.type}打卡</p>
                </div>
                <div class="weui_cell_ft">
                        ${launch_record.date}
                </div>
            </a>
        </c:forEach>
    <div class="tips"><spa>--- 没有啦~ ---</spa></div>
    </div>
</div>


<div class="weui_tabbar" style="position: fixed;margin-bottom: 0px">
    <a class="weui_tabbar_item" href="/wechatAuth/route/gotoCard">
        <div class="weui_tabbar_icon">
            <img src="http://www.kuibutech.com/wechatAuth/img/icon_nav_article.png">
        </div>
        <p class="weui_tabbar_label">打卡</p>
    </a>

    <a class="weui_tabbar_item" href="/wechatAuth/route/gotoMain">
        <div class="weui_tabbar_icon">
            <img src="http://www.kuibutech.com/wechatAuth/img/icon_nav_cell.png">
        </div>
        <p class="weui_tabbar_label">我的</p>
    </a>

    <a class="weui_tabbar_item" href="/wechatAuth/route/gotoMessage">
        <div class="weui_tabbar_icon">
            <img src="http://www.kuibutech.com/wechatAuth/img/icon_nav_dialog.png">
        </div>
        <p class="weui_tabbar_label">通知</p>
    </a>

</div>
<!-- jQuery文件 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>